/* 
        将clockTest.html下的<style><script>文件分解出来，并且可以正常运行 
        1.导入模块
        2.匹配正则
        3.读取文件
 */
/* 
        注意：
        写入文件fs.writeFile()只能创建文件不能创建路径
        如果想要和原视频一样需要自己在clockTest.html加入以下代码
        <link rel="stylesheet" type="text/css" href="./clock.css" />
        <script src="./clock.js" type="text/javascript" ></script>
 
  */
//1
const fs = require('fs')
const path = require('path')
//2
//              \s空白字符 \S非空白字符  *任意次
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
//3
fs.readFile(
    path.join(__dirname, '../testFile/clock/clockTest.html'),
    'utf8',
    (err, data) => {
        if (!err) {
            //调用方法进行匹配，拿到对应字符串
            resolveCss(data)
            // resolveJS(data)
            // resolveHtml(data)
        }
    }
)

// exec 方法 用于检索字符串正则表达式的匹配
//获取js文件
function resolveJS(data) {
    //通过exec[0]拿到对应字符串之后全局匹配去掉标签
    const js = regScript.exec(data)[0].replace(/<script>|<\/script>/g, '')
    //写入
    fs.writeFile(
        path.join(__dirname, '../testFile/clock/clock.js'),
        js,
        'utf8',
        (err, data) => {
            if (err) {
                return console.log('js写入失败')
            }
            console.log('js写入成功')
        }
    )
}
//获取css文件
function resolveCss(data) {
    //拿到内容替换掉style标签
    const css = regStyle.exec(data)[0].replace(/<style>|<\/style>/g, '')

    console.log(css)

    //写入
    // fs.writeFile(
    //     path.join(__dirname, '../testFile/clock/clock.css'),
    //     css,
    //     'utf8',
    //     (err, data) => {
    //         if (err) {
    //             return console.log('css写入失败')
    //         }
    //         console.log('css写入成功')
    //     }
    // )
}
//获取html文件
function resolveHtml(data) {
    var html = data
    /* 
    注意是html.replace,不是data.replace 
    将css和js内容替换成''
    */
    html = html.replace(regStyle.exec(data)[0], '')
    html = html.replace(regScript.exec(data)[0], '')
    //写入
    fs.writeFile(
        path.join(__dirname, '../testFile/clock/clock.html'),
        html,
        'utf8',
        (err, data) => {
            if (err) {
                return console.log('html写入失败')
            }
            console.log('html写入成功')
        }
    )
}
